<template>
    <div id="searchBarWrapper" ref="searchBarWrapper" :style="searchBarStyle">
        <input type="text" ref="searchBarInput" placeholder="请输入搜索内容"/><button @click="closeSearchBar">关闭</button>
    </div>
</template>

<script setup lang="ts">
import type { CSSProperties,Ref } from 'vue'
import { computed,nextTick,ref } from 'vue'
import {useSearchBar} from '@/hooks/searbar'
const { closeSearchBar } = useSearchBar()
const searchBarStyle = computed<CSSProperties>(() => {
    return {
        position: 'absolute',
        top: '120px',
        left: '300px',
    }
})
const searchBarInput:Ref<HTMLInputElement |null> = ref(null)
nextTick(()=>{
    searchBarInput.value?.focus()
})
</script>

<style lang="scss" scoped>
    #searchBarWrapper{
        width: 500px;
        height: 40px;
        cursor: pointer;
        border-radius: 8px;
        border: 1px solid gray;
        display: flex;
        input{
            flex:1
        }
        button{
            width: 50px;
        }
    }
</style>
